<template>
	<view class="user-promote-order">
		<!-- #ifndef H5 -->
		<u-navbar :is-fixed="false"  :border-bottom="false" :background="{background: '#4e87fc' }" title-color="#ffffff"
			title="我的团队"></u-navbar>
		<!-- #endif -->
		<view class="date-select-display-area" @click="showPicker = true">
			<text class="start-date" v-text="start_date"></text>
			<text class="segmentation-icon">至</text>
			<text class="end-date" v-text="end_date"></text>
			<u-icon name="arrow-down"></u-icon>
		</view>
		<mx-date-picker :show="showPicker" type="range" :value="date_range" :show-tips="true" :show-seconds="true"
			@confirm="ed" />

		<view class="information-tow">
			<view class="title-display-area">
				<text class="title">核销数据统计表</text>
				<!-- <text class="hint"><text style="color: #ff0000;">*</text> 奖励金额为估值,请以实际核算为准</text> -->
			</view>
			<view class="content bg-white">
				<view class="table-header row">
					<text class="item sm">用户昵称</text>
					<text class="item sm">核销时间</text>
				</view>
				<view class="table-body row" v-for="(v,k) in lists">
					<text class="item" v-text="v.nickname"></text>
					<text class="item" v-text="v.create_time"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { cancelAfterVerificationRecord } from "@/api/user";
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			MxDatePicker
		},
		data() {
			return {
				showPicker: false,
				start_date: '',
				end_date: '',
				date_range: [],
				new_user_count: '',
				new_user_order_count: '',
				order_amount: '',
				order_count: '',
				earnings: '',
				middle_rate: '',
				lists: [],
			};
		},
		onLoad: function(options) {
			var date = new Date();
			this.start_date = date.getFullYear() + '-' + (date.getMonth() + 1 <= 9 ? '0' + (date.getMonth() + 1) : date
				.getMonth() + 1) + '-01';
			this.end_date = date.getFullYear() + '-' + (date.getMonth() + 1 <= 9 ? '0' + (date.getMonth() + 1) : date
				.getMonth() + 1) + '-' + (date.getDate() <= 9 ? '0' + date.getDate() : date.getDate());
			this.date_range.push(this.start_date)
			this.date_range.push(this.end_date)
			
			cancelAfterVerificationRecord({
				start_date:this.start_date,
				end_date:this.end_date,
			}).then(res =>{
				if(res.code == 1){
					this.lists = res.data
				}
			})
		},
		methods: {
			ed(e) {
				this.showPicker = false
				this.start_date = e.value[0]
				this.end_date = e.value[1]
				cancelAfterVerificationRecord({
					start_date:this.start_date,
					end_date:this.end_date,
				}).then(res =>{
					if(res.code == 1){
						this.lists = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.date-select-display-area {
		color: #ffffff;
		display: block;
		text-align: center;
		line-height: 80rpx;
		background-color: rgb(32, 230, 223);

		.segmentation-icon {
			padding: 0 20rpx;
		}

		.end-date {
			padding-right: 10rpx;
		}
	}

	.information-one {
		width: 95%;
		margin: 2vh auto;
		background-color: rgb(32, 230, 223);
		border-radius: 20rpx;

		.title-display-area {
			.title {
				color: #ffffff;
				font-size: 34rpx;
				display: inline-block;
				padding: 20rpx 40rpx;
			}

			.hint {
				color: rgba(255, 255, 255, .8);
				display: inline-block;
			}
		}

		.content {
			border-radius: 10px;
			display: flex;
			flex-wrap: wrap;

			.information {
				width: 33.33%;
				text-align: center;
				padding: 2vh 0;

				.number {
					display: block;
					color: #000000;
					padding-top: 10rpx;
				}

				.hint {
					display: block;
					color: #979797;
				}
			}
		}
	}

	.information-tow {
		width: 95%;
		margin: 2vh auto;
		background-color: rgb(32, 230, 223);
		border-radius: 20rpx;

		.title-display-area {
			.title {
				color: #ffffff;
				font-size: 34rpx;
				display: inline-block;
				padding: 20rpx 40rpx;
			}

			.hint {
				font-size: 24rpx;
				color: rgba(255, 255, 255, .8);
				display: inline-block;
			}
		}

		.content {
			border-radius: 10px;
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;

			.table-header {
				background-color: #f3faff;
				width: 100%;
				border-radius: 10rpx;

				.item {
					color: #1795fa;
					width: 50%;
					display: block;
					text-align: center;
					padding: 10rpx 0;
				}
			}

			.table-body {
				width: 100%;

				.item {
					color: #000;
					width: 50%;
					display: block;
					text-align: center;
					padding: 20rpx 0;
				}
			}

		}
	}
</style>
